<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:bootstrap="http://br.com.bootstrap/jsf">
    <f:view>
        <h:head>
            <title>Bootstrap</title>
            <h:outputStylesheet library="bootstrap" name="css/bootstrap.css"></h:outputStylesheet>

            <h:outputScript library="bootstrap" name="js/jquery.js"></h:outputScript>
            <h:outputScript library="bootstrap" name="js/bootstrap.js"></h:outputScript>
            <h:outputScript library="bootstrap" name="js/components.js"></h:outputScript>

        </h:head>
        <h:body>
            <div style=" display: block; width: 1024px; margin: 0 auto; margin-top: 20px;">

                <h4>MarkerWords</h4>
                <hr />
                <bootstrap:markerWords id="textQualquer" value="#{commonsMB.text}" words="have, commit, members"></bootstrap:markerWords>
                <br />

                <h4>ImagePolaroid</h4>
                <hr />
                <bootstrap:imagePolaroid styleClass="img" library="image" name="bg"  extension="jpg"></bootstrap:imagePolaroid>
                <bootstrap:toolTip id="tt2" targetClass="img" orientation="right" value="Imagem haha!"></bootstrap:toolTip>
                <br />

                <h4>ToolTip</h4>
                <hr />
                <h:inputText styleClass="inNome" ></h:inputText>
                <bootstrap:toolTip id="tt" targetClass="inNome" orientation="right" value="Informe seu nome"></bootstrap:toolTip>
                
            </div>
        </h:body>
    </f:view>
</html>
